<template>
  <div class="login">
    <div class="wrapper register-main">
      <h1>【影沐】</h1>
      <form @submit="formSubmit" @reset="formReset">
        <div class="inputItem">
          <input type="password" placeholder="密码" @input="passwordInput" placeholder-style="color:#FFFFFF;">
          <p v-if="!password.passwordIsTrue">{{password.passwordErrMsg}}</p>
        </div>
        <div class="inputItem">
          <input type="password" placeholder="确认密码" @input="confirmPwdInput" placeholder-style="color:#FFFFFF;">
          <p v-if="!confirmPwd.confirmPwdIsTrue">{{confirmPwd.confirmPwdErrMsg}}</p>
        </div>
        <div class="inputItem">
          <div class="flex">
            <input type="text" placeholder="短信验证码" @input="codeInput" placeholder-style="color:#FFFFFF;">
            <div class="code" v-if="countDownShow">{{countDown}}s</div>
            <div class="code" v-else ﻿@tap="getCode">获取验证码</div>
          </div>
          <p v-if="!code.codeIsTrue">{{code.codeErrMsg}}</p>
        </div>
        <div class="regCity">
          <van-cell title="所在省市" is-link ﻿@tap="showArea" :value="newInfo.provice_city"></van-cell>
        </div>

        <button  open-type="getUserInfo" formType="submit">注册</button>
      </form>
      <div class="register" ﻿@tap="goPage('/person/login')"><span>已注册，去登录</span></div>
    </div>
    <div class="agree">
      <van-checkbox
        :value="checked"
        checked-color="#EF5A55"
        @change="checked = !checked"
      >
        我已阅读并同意 <span class="link">《用户服务协议》</span><span class="link">《隐私政策》</span>
      </van-checkbox>
    </div>
    <van-toast id="van-toast" />
    <!--    选择省市-->
    <van-popup :show="isShowAdd" @close="isShowAdd = false" position="bottom">
      <van-area title="所在省市"  @cancel="isShowAdd = false" @confirm="changeAdd" :area-list="areaList" value="110101" :columns-num="2" ></van-area>
    </van-popup>
  </div>
</template>

<script>
  import Toast from 'vant-weapp/dist/toast/toast';
  import areaList from '@/tool/area';
  export default {
    name: "login",
    data(){
      return{
        areaList,
        checked: true,
        countDown: 60,
        countDownShow: false,
        time: "",
        mobile: "",
        password: {
          password: "",
          passwordErrMsg: "",
          passwordIsTrue: false
        },
        confirmPwd:{
          confirmPwd: "",
          confirmPwdErrMsg: "",
          confirmPwdIsTrue: false
        },
        code:{
          code: "",
          codeErrMsg: "",
          codeIsTrue: false
        },
        newInfo: {},
        isShowAdd: false,
      }
    },
    methods: {
      goPage(url) {
        let page = getCurrentPages()
        let num = page.findIndex((item) => {
          return item.route === 'person/login'
        })
        let dalta = page.length - (num+1)
        ﻿uni.navigateBack({
          delta: dalta
        })
      },
      passwordInput(e){
        let reg = /^[0-9a-zA-Z]{6,20}$/;
        this.password.password = e.mp.detail.value;
        if(this.confirmPwd.confirmPwd.length > 0){
          if(this.password.password !== this.confirmPwd.confirmPwd){
            this.confirmPwd.confirmPwdErrMsg = "两次密码不一致！";
            this.confirmPwd.confirmPwdIsTrue = false;
            if(!reg.test(this.password.password)){
              this.password.passwordErrMsg = "密码由6-20位数字加字母组成！";
              this.password.passwordIsTrue = false;
            }
            else {
              this.password.passwordErrMsg = "";
              this.password.passwordIsTrue = true;
            }
          }
          else {
            if(this.password.password === ""){
              this.password.passwordErrMsg = "请输入密码！";
              this.password.passwordIsTrue = false;
            }
            else if(!reg.test(this.password.password)){
              this.password.passwordErrMsg = "密码由6-20位数字加字母组成！";
              this.password.passwordIsTrue = false;
            }
            else {
              this.password.passwordErrMsg = "";
              this.password.passwordIsTrue = true;
              this.confirmPwd.confirmPwdErrMsg = "";
              this.confirmPwd.confirmPwdIsTrue = true;
            }
          }
        }
        else {
          if(this.password.password === ""){
            this.password.passwordErrMsg = "请输入密码！";
            this.password.passwordIsTrue = false;
          }
          else if(!reg.test(this.password.password)){
            this.password.passwordErrMsg = "密码由6-20位数字加字母组成！";
            this.password.passwordIsTrue = false;
          }
          else {
            this.password.passwordErrMsg = "";
            this.password.passwordIsTrue = true;
          }
        }
      },
      confirmPwdInput(e){
        this.confirmPwd.confirmPwd = e.mp.detail.value;
        if(this.confirmPwd.confirmPwd === this.password.password){
          this.confirmPwd.confirmPwdErrMsg = "";
          this.confirmPwd.confirmPwdIsTrue = true;
        }
        else {
          this.confirmPwd.confirmPwdErrMsg = "两次密码不一致！";
          this.confirmPwd.confirmPwdIsTrue = false;
        }
      },
      codeInput(e){
        this.code.code = e.mp.detail.value;
        if(this.code.code === ""){
          this.code.codeErrMsg = "请输入短信验证码！";
          this.code.codeIsTrue = false;
        }
        else if(!(/^[0-9]{4}$/.test(this.code.code))){
          this.code.codeErrMsg = "验证码格式不正确！";
          this.code.codeIsTrue = false;
        }
        else {
          this.code.codeErrMsg = "";
          this.code.codeIsTrue = true;
        }
      },
      showArea(){
          this.isShowAdd = !this.isShowAdd
      },
      changeAdd(data){
        this.newInfo.city_code = data.mp.detail.values[1].code;
        this.newInfo.province_code = data.mp.detail.values[0].code;
        this.newInfo.provice_city = data.mp.detail.values[0].name + ' ' + data.mp.detail.values[1].name;
        this.isShowAdd = false;
      },
      formSubmit(){
        if(this.checked){
          if(this.password.password !== this.confirmPwd.confirmPwd){
            ﻿uni.showToast({
              title: "两次密码不一致，请重新输入！",
              icon: 'none',
              duration: 2000
            })
          }
          else if(this.code.code === ""){
            ﻿uni.showToast({
              title: "请输入短信验证码！",
              icon: 'none',
              duration: 2000
            })
          }
          else {

              if(this.password.passwordIsTrue && this.confirmPwd.confirmPwdIsTrue && this.code.codeIsTrue){
                if(this.newInfo.city_code) {
                  this.$ajax
                    .post(this.$api.register, {
                      mobile: this.mobile,
                      password: this.confirmPwd.confirmPwd,
                      code: this.code.code,
                      city_code: this.newInfo.city_code,
                      province_code: this.newInfo.province_code,
                    })
                    .then(() => {
                      ﻿uni.showToast({
                        title: "注册成功！",
                        icon: 'success',
                        duration: 2000
                      });
                      setTimeout(() => {
						  uni.navigateTo({
						  	url: '/person/login'
						  })
                      }, 2000)
                    })
                    .catch(err => {
                      ﻿uni.showToast({
                        title: err,
                        icon: 'none',
                        duration: 2000
                      })
                    });
                }
                else {
                  ﻿uni.showToast({
                    title: "请选择省市！",
                    icon: 'none',
                    duration: 2000
                  })
                }
              }
              else {
                ﻿uni.showToast({
                  title: "请输入完整信息！",
                  icon: 'none',
                  duration: 2000
                })
              }
          }
        }
        else {
          ﻿uni.showToast({
            title: "请先同意用户服务协议！",
            icon: 'none',
            duration: 2000
          })
        }
      },
      timer(){
        this.time = setInterval(() => {
          this.countDown--;
          if(this.countDown === 0){
            clearInterval(this.time);
            this.countDownShow = false;
          }
        }, 1000);
      },
      getCode(){
        this.$ajax
            .post(this.$api.getMobileCode,{
              mobile:this.mobile
            })
            .then(() => {
              ﻿uni.showToast({
                title: "已发送至手机！",
                icon: 'success',
                duration: 2000
              });
              this.countDownShow = true;
              this.countDown = 60;
              this.timer();
            })
            .catch(err => {
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
      }
    },
    onLoad(res){
      this.mobile = res.id;
      this.checked= true;
      this.countDown= 60;
      this.countDownShow= false;
      this.time= "";
      this.password= {
        password: "",
        passwordErrMsg: "",
        passwordIsTrue: false
      };
      this.confirmPwd={
        confirmPwd: "",
        confirmPwdErrMsg: "",
        confirmPwdIsTrue: false
      };
      this.code={
        code: "",
        codeErrMsg: "",
        codeIsTrue: false
      };
      this.newInfo = {};
      this.isShowAdd = false;
    },
    onHide(){
      clearInterval(this.time);
    }
  }
</script>

<style>
  page{
    height: 100% !important;
    width: 100% !important;
    background-image: url("https://test.hrycf.com/front/loginBg.png") !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
    -moz-background-size:100% 100% !important;
    background-color: #4989C0;
    text-align: center;
  }
  h1{
    font-size:60rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    margin-bottom: 192rpx;
  }
  input, .code{
    text-align: left;
    background:rgba(93,91,92,0.4);
    border-radius:41rpx;
    color: white;
    font-size:26rpx;
    font-family:PingFang SC;
    font-weight:500;
    line-height: 81rpx;
    height: 81rpx;
    padding: 0 27rpx;
  }
  .wrapper{
    position: fixed;
    bottom: 24.8%;
    width: 62.5%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .flex{
    display: flex;
  }
  .flex input{
    flex: 1;
  }
  .flex .code{
    flex: 1;
    margin-left: 16rpx;
  }
  .item{
    padding-bottom: 26rpx;
  }
  button{
    height:82rpx;
    background:rgba(255,255,255,1);
    border-radius:41rpx;
    line-height: 82rpx;
    font-size:28rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:#D90647;
    margin-bottom: 27rpx;
  }
  .register{
    text-align: right;
    color: white;
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
  }
  .agree{
    position: fixed;
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
    bottom: 100rpx;
    margin-left: 67rpx;
  }
  .van-checkbox__label{
    color: white !important;
  }
  .link{
    color: #EF5A56;
  }
  .code{
    text-align: center;
  }
  .inputItem{
    margin-bottom: 26rpx;
  }
  .inputItem>p{
    text-align: left;
    color: #EF5A56;
    font-size: 26rpx;
  }
  .regCity{
    width: 100%;
    margin-bottom: 26rpx;
  }
</style>
